<template>
  <div class="inOneRes">
    <!-- <audio src="../../../assets/voice/open_man.mp3" muted autoplay loop id="myaudio" style="display: none"></audio> -->
    <!-- <audio src="http://fcgbox.oss-us-west-1.aliyuncs.com/h5/open_man.mp3" muted autoplay loop id="myaudio" style="display: none"></audio> -->

    <Transition
      :duration="{ enter: 800, leave: 500 }"
      enter-active-class="fadeIn"
      leave-active-class="fadeOut"
    >
      <div class="list-content" v-if="!showPop">
        <div class="jpc-content">Prize pool</div>
        <div class="list-container">
          <img
            class="border-one"
            src="https://m.fcgbox.com/static/webp/border-one.webp"
            draggable="false"
          />
          <div class="list-body" style="transform: translate(0px, 0px)">
            <vue-marquee direction="left" :duration="durationT" ref="marquee1">
              <vue-marquee-slide v-for="(item,key) in goods" :key="item.id" >
                <div class="good-item">
                  <div
                    class="good-content"
                    :class="`level-${(item % 3) + 3}`"
                    :style="{ backgroundImage: 'url(' + toUrl(key) + ')' }"
                  >
                    <img
                      class="good-img"
                      :src="'https://www.namele.com'+item.img"
                      draggable="false"
                    />
                    <div class="good-name u-line-1">
                      {{(item.name)}}
                    </div>
                    <div class="item-price">${{item.price}}</div>
                  </div>
                </div>
               
              </vue-marquee-slide>
            </vue-marquee>
            <!-- <div class="good-item" v-for="item in 30" :key="item">
              <div
                class="good-content"
                :class="`level-${(item % 3) + 3}`"
                :style="{ backgroundImage: 'url(' + toUrl(item) + ')' }"
              >
                <img
                  class="good-img"
                  src="https://img.rolling-boxes.com/pgoods/hp_37929.webp"
                  draggable="false"
                />
                <div class="good-name u-line-1">K70 RGB MK.2 Low Profile</div>
                <div class="item-price">$180.00</div>
              </div>
            </div> -->
          </div>
        </div>
        <div class="stop-btn-content" @click="ShowPop">
          <div class="stop-btn" :class="{ rubberBand: showAni }">
            <div class="stop-btn-text">
              STOP NOW-<span class="time-content">{{ timer }}</span>
            </div>
          </div>
        </div>
      </div>
    </Transition>
    <Transition
      :duration="{ enter: 800, leave: 500 }"
      enter-active-class="fadeIn"
      leave-active-class="fadeOut"
    >
      <div
        v-if="showPop"
        class="open-res-content"
        style="animation-duration: 1s"
      >
        <div class="open-res-tip">Congratulations</div>
        <div class="cover-content-bc">
          <div
            class="cover-content"
            style="
              background-image: url('https://m.fcgbox.com/static/img_v3/sbc_3.png')"
          >
            <img
              class="open-res-cover"
              src="https://img.rolling-boxes.com/pgoods/hp_37928.webp"
              draggable="false"
            />
            <div class="open-res-title">【TRY】Beoplay E8 3rd Gen Wireless</div>
            <div class="open-res-price">$358.00</div>
          </div>
        </div>
        <div class="btn-row">
          <!---->
          <div class="btn-item" style="width: 187px">Unbox Just Now</div>
        </div>
        <!---->
      </div>
    </Transition>
  </div>
</template>
  
  <script>
var audio = document.getElementById("open_man");
var audio2 = document.getElementById("open_kuai");
var t1 = 3e3; //如果是轮询，这个时间必须大于音频的长度。如果是webscoket，应该设置一个状态play，避免重复播放，如下：
var t2 = 2000; //音频的长度，确保能够完整的播放给用户
var t3 = 10000; //音频的长度，确保能够完整的播放给用户
var play = false;
var play2 = false;
function open_man() {
  if (play) {
    return false;
  }
  audio.currentTime = 0; //设置播放的音频的起始时间
  audio.volume = 0.5; //设置音频的声音大小
  audio.muted = false; //关闭静音状态
  play = true;
  setTimeout(function () {
    play = false;
    audio.muted = true; //播放完毕，开启静音状态
  }, t2);
}
function open_kuai() {
  if (play2) {
    return false;
  }
  audio2.currentTime = 0; //设置播放的音频的起始时间
  audio2.volume = 0.5; //设置音频的声音大小
  audio2.muted = false; //关闭静音状态
  play2 = true;
  setTimeout(function () {
    play2 = false;
    audio2.muted = true; //播放完毕，开启静音状态
  }, t3);
}
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    
  },
  data() {
    return {
      durationT:10000,
      timer: 10,
      showPop: false,
      showAni: false,
      goods:[]
    };
  },
  beforeMount(){
    this.goods = this.$route.params.goods
    this.durationT = this.durationT * this.goods.length/10  
    console.log( this.durationT ,"------")
  },
  mounted() {
   
    
    let i = 0;
    setInterval(() => {
      i++;
      // document.querySelector(".list-body").style.transform = `translate(-${3*i}px, 0px)`;
    }, 10);
    open_kuai();
    for (let index = 0; index < 10; index++) {
      setTimeout(() => {
        this.timer = 9 - index;
        if (this.timer == 0) {
          this.ShowPop();
        }
      }, 1000 * index);
    }
  },
  methods: {
    ShowPop() {
      play2 = false;
    audio2.muted = true; //播放完毕，开启静音状态
      // this.durationT = 10000*3
      this.$refs.marquee1.enter()
      this.showAni = true;

      open_man();
      setInterval(() => {
        this.showPop = true;
      }, 2000);
    },
    toUrl(item) {
      return `/static/img/box/sbc_${(item % 3) + 3}.webp`;
    },
  },
};
</script>
  
<style lang="scss">
.marquee-container {
  height:  100%  !important;
  width: 100% !important;
}
</style>

  <style lang="scss" scoped>
@keyframes rubberBand-data-v-473359fc {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.1, 0.9, 1);
    transform: scale3d(1.2, 0.8, 1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 1.1, 1);
    transform: scale3d(0.9, 1.1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.u-line-1 {
  white-space: nowrap;
text-overflow:ellipsis;
text-overflow: ellipsis;
overflow:hidden;
}
.inOneRes {
  min-height: 100%;
    overflow-x: hidden;
    font-family: Avenir,Helvetica,Arial,sans-serif;
  .rubberBand {
    -webkit-animation: rubberBand-data-v-473359fc 0.5s linear;
    animation: rubberBand-data-v-473359fc 0.5s linear;
  }
  .list-content {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-size: 100% 100%;
    height: 208px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    .jpc-content {
      position: absolute;
      top: -93px;
      left: 50%;
      -webkit-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%);
      z-index: 3;
      width: 253px;
      height: 49px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 34px;
      letter-spacing: 2px;
      font-family: bbzy;
      color: #fff;
      background-size: 100% 100%;
    }

    .stop-btn-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 41px;
      position: absolute;
      left: 50%;
      bottom: -104px;
      -webkit-transform: translate(-50%, 100%);
      transform: translate(-50%, 100%);
      .stop-btn {
        width: 234px;
        height: 83px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 29px;
        background: url(/static/img/box/ljtz.webp);
        background-size: 100% 100%;
        font-family: bbzy;
        .stop-btn-text {
          color: #fff;
          font-size: 22px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .time-content {
          font-size: 29px;
          color: #fff;
          font-family: bbzy;
        }
      }
    }

    .list-container {
      width: 100%;
      height: 284px;
      position: relative;
      box-sizing: border-box;
      background: hsla(0, 0%, 100%, 0.3);
      -webkit-backdrop-filter: blur(31px);
      backdrop-filter: blur(31px);
      .border-one {
        position: absolute;
        width: 120%;
        height: 355px;
        top: 140px;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    }

    .list-body {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 20px;
      height: 239px;

      .good-img {
        margin-top: 15px;
        // width: 124px;
        height: 124px;
        border-radius: 3px;
        position: relative;
      }

      .good-content {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 8px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-top-left-radius: 26px;
        border-bottom-right-radius: 31px;
        border: 3px solid #fff;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .item-price {
          font-size: 16px;
          font-weight: 200;
          z-index: 8;
          color: #fff;
          font-family: bbzy;
        }
        .good-name {
          width: 100%;
          text-align: center;
          font-size: 12px;
          color: #fff;
          margin: 10px 0;
          padding: 0 10px;
          box-sizing: border-box;
        }
      }

      .good-content::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        -webkit-filter: blur(10px);
        filter: blur(10px);
        background: linear-gradient(180deg, currentColor, currentColor);
        opacity: 0.07;
        pointer-events: none;
        z-index: 0;
      }

      .good-item {
        flex-shrink: 0;
        width: 192px;
        height: 100%;
        padding: 5px;
        box-sizing: border-box;

        .level-5 {
          color: #ffc700 !important;
        }
        .level-4 {
          color: #fb7eff !important;
        }
        .level-3 {
          color: #6cf !important;
        }
        .level-2 {
          color: silver !important;
        }
      }
    }
  }

  width: 390px;
  height: 100vh;
  position: relative;
  background: url(/static/img/box/res_bc.webp);
  background-size: 100% 100%;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  .open-res-content {
    width: 390px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .open-res-tip {
      font-size: 29px;
      color: #fff;
      margin-bottom: 26px;
      font-family: bbzy;
    }
    .cover-content-bc {
      width: 332px;
      height: 425px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      -webkit-animation: changes-data-v-c7163766 0.5s ease-in-out;
      animation: changes-data-v-c7163766 0.5s ease-in-out;
      box-sizing: border-box;
      padding: 8px;
      border-radius: 41px 10px 46px 10px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      transition: all 0.3s ease-in-out;
      cursor: pointer;
      position: relative;

      .open-res-cover {
        margin-top: 52px;
        width: 208px;
        // height: 208px;
        border-radius: 4px;
      }

      .open-res-title {
        padding: 15px;
        font-size: 16px;
        color: #fff;
        font-weight: 500;
        text-align: center;
      }
    }
    .cover-content {
      width: 322px;
      height: 414px;
      border: 5px solid #fff;
      border-radius: 41px 10px 46px 10px;
      display: flex;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      padding: 15px;
      position: relative;
      background-size: 100% 100%;
      flex-direction: column;
    }
    .open-res-price {
      font-size: 22px;
      color: #fff;
      font-family: bbzy;
    }
    .btn-row {
      margin-top: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .btn-item {
      background: linear-gradient(98deg, #f48836, #f4364c 100%);
      width: 166px;
      height: 46px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 16px;
      color: #fff;
      margin: 0 8px;
      position: relative;
      font-family: bbzy;
      border-radius: 4px;
    }
  }
}
</style>